<!--  -->
<template>
<div class="the-page">
  
  <el-form :model="detailData.detail" class="demo-form-inline" label-width="120px">
    <el-form-item label="创建时间">{{detailData.detail.createdAt}}</el-form-item>
    <el-form-item label="举报对象">
      {{getItemFromArray(reportList.target,detailData.detail.reportObj)}}
    </el-form-item>
    <el-form-item label="举报人">
      {{detailData.detail.informantName}}
      {{detailData.detail.informantPhone}}
    </el-form-item>
    <el-form-item label="举报原因">{{detailData.detail.reportReason}}</el-form-item>
    <el-form-item label="被举报人">
      {{detailData.detail.beReportUserName}}
      {{detailData.detail.beReportUserPhone}}
    </el-form-item>
    <el-form-item v-if="detailData.detail.reportObj===2" label="被举报作品">
      <router-link :to="`/content/detail/${detailData.detail.beReportId}`" style="color: #409eff;text-decoration: underline;">查看作品详情</router-link>
    </el-form-item>
    <el-form-item label="举报内容">{{detailData.detail.reportContent}}</el-form-item>
    <el-form-item label="附加图片">
      <div class="imgBg" style="display: inline-block;margin-right:12px;" v-for="(url,index) in detailData.detail.imageList" :key="index"  @click="detailFn.openImageViewer(detailData.detail.imageList,index)">
        <el-image fit="contain" style="width: 120px; height: 120px;" :src="url"/>
      </div>
    </el-form-item>
    <el-form-item label="当前状态">
      {{getItemFromArray(reportList.status,detailData.detail.dealStatus)}}
    </el-form-item>
    <el-form-item v-if="detailData.detail.updateAt" label="处理时间">{{detailData.detail.updateAt}}</el-form-item>
    <el-form-item label="处理结果">
      {{getItemFromArray(reportList.result,detailData.detail.dealResult) || "--"}}
    </el-form-item>
    <el-form-item label="处理备注">{{detailData.detail.dealRemark||"--"}}</el-form-item>
    <el-form-item label="剩余处理次数">{{detailData.detail.surplusNum||"0"}}</el-form-item>
  </el-form>

  <div style="text-align:center;" v-if="hasPermission(['operation:report'])">
    <el-button v-if="detailData.detail.dealStatus===0" type="primary" @click="operateFn.openPanel('add')">添加处理意见</el-button>
    <el-button v-else-if="detailData.detail.surplusNum > 0" type="primary" @click="operateFn.openPanel('edit',detailData.detail)">更改处理意见</el-button>
  </div>
  
  <el-dialog v-model="operateData.showPanel" width="50%" @closed="operateFn.closedPanel">
    <template #title>
      <div style="text-align:left;">添加/修改意见</div>
    </template>
    <div class="detail-body">
      <el-form :model="operateData.post" class="demo-form-inline" label-width="120px">
        <el-form-item label="是否违规">
          
          <el-radio-group v-model="operateData.post.isViolation">
            <el-radio :label="1" size="large">是</el-radio>
            <el-radio :label="0" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="operateData.post.remark" type="textarea" rows="5"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button plain @click="operateFn.closePanel">取消</el-button>
        <el-button plain type="primary" @click="operateFn.submitData">确定</el-button>
      </span>
    </template>
  </el-dialog>
  
</div>
  
</template>

<script>
export default {
  name:"reportDetail",
}
</script>
<script setup>
import { reactive,ref, watchEffect } from 'vue';
import {useRouter,onBeforeRouteUpdate } from "vue-router";
import { getReportDetail,addReport,updateReport }  from "@/api/operation.js";
import { reportList,getItemFromArray }  from "@/utils/tool.js";
import { ElMessage } from 'element-plus';
import imageViewer from "@/components/imageViewer/index2";

const router = useRouter();
const params = ref({});
const query = ref({});
watchEffect(()=>{
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})

// 详情
const { $data: detailData, $fn: detailFn } = (() => {
  const $data = reactive({
    detail: {},
    dataReady: false, //数据是否已拿到
  });
  const $fn = {
    getDetails() {
      console.log("report detail:",params.value.id)
      if(!params.value.id)return;
      $data.dataReady = false;
      getReportDetail(params.value.id).then((res) => {
        console.log(params.value.id, "res:", res);
        if (res.code === 0) {
          $data.dataReady = true;
          $data.detail = { ...res.data };
        }
      });
    },
    openImageViewer(list, index) {
      imageViewer({initialIndex: index,urlList: list});
    },
  };
  // $fn.getDetails();
  return {
    $data,
    $fn,
  };
})();


// 添加或更改 处理意见
const { $data: operateData, $fn: operateFn } = (() => {
  const backup = {
    post:{
      isViolation: 1,
      remark: "",
    }
  }
  const $data = reactive({
    showPanel: false,
    isEdit: false,
    post:{...backup.post},

  })
  const $fn = {
    openPanel(operate,row){
      if(operate==='add'){
        $data.isEdit=false;
      }else if(operate==='edit'){
        $data.isEdit=true;
        $data.post.remark = row.dealRemark;
        $data.post.isViolation = row.isViolation;
      }
      $data.showPanel=true;
    },
    closePanel(){
      $data.showPanel=false;
    },
    closedPanel(){
      $data.post = {
        ...backup.post,
      };
    },
    submitData(){
      console.log("post:",$data.post);
      let req = $data.post;
      if(!req.remark){
        ElMessage.warning("请填写备注！");
        return;
      }
      if(detailData.detail.dealStatus===0){//未处理，则添加意见
        addReport(params.value.id,req).then(res=>{
          if(res.code===0){
            ElMessage.success("添加意见成功！");
            $fn.closePanel();
            detailFn.getDetails();
          }
        })
      }else{//已处理，则修改意见
        updateReport(params.value.id,req).then(res=>{
          if(res.code===0){
            ElMessage.success("修改意见成功！");
            $fn.closePanel();
            detailFn.getDetails();
          }
        })
      }
    }
  }

  return {
    $data,
    $fn,
  }
})();

function init(){
  detailFn.getDetails();
}
init();

// 从相同路由进入（不同参数），如/a/b/1 => /a/b/2
onBeforeRouteUpdate((to, from, next) => {
  params.value.id = to.params.id;
  init();
  next();
});


</script>

<style scoped lang="scss">
.the-page{
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
}
</style>